<template>
	<view class="login">
		<view class="logo-box">
			<image :src="logo" mode="widthFix" class="logo"></image>
			<view v-if="name">{{ name }}</view>
		</view>
		<view class="form">
			<view class="input"><input type="text" placeholder="请输入账号" v-model="log_info.account" /></view>
			<view class="input" style="position: relative;">
				<input :type="psd_type" placeholder="请输入密码" v-model="log_info.password"
					style="border: none; outline: none;font-size: 32rpx;padding: 0;" />
				<view class="show-psw" @tap="togPsd" style="position: absolute;right: 20rpx;">
					<image :src="!showPsw ? '../../static/eyeclose.png' : '../../static/eyeopen.png'" mode="widthFix">
					</image>
				</view>
			</view>
			<view class="reg-for">
				<view class="reg" @click="gotoRegister()"
					>没有账号，去注册 ></view>
			</view>
			<view class="btn" @click="Log">登录</view>
		</view>
		<view class="footer">
			<slot></slot>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			//logo、name这两个属性是为了避免提示错误暂时留着的，后边优化时处理掉
			logo:'',
			name:'',
			// u_info: {},
			showPsw: false,
			showPswTwice: false,
			psd_type: 'password',
			psd_type2: 'password',
			log_info: {
				account: '',
				password: ''
			}
		};
	},
	methods: {
		gotoRegister(){
			uni.navigateTo({
				url:'/pages/register/register'
			})
		},
		togPsd() {
			this.showPsw = !this.showPsw;
			if (this.showPsw) {
				this.psd_type = 'text';
			} else {
				this.psd_type = 'password';
			}
		},
		Log() {
			if (!this.log_info.account || !this.log_info.password) {
				uni.showToast({
					title: '账号或密码为空',
					icon: 'none'
				});
				return;
			}
			this.login();
		},
		async login() {
			const res = await this.$myRequest({
				method: 'POST',
				url: '/api/user/login',
				data: {
					username: this.log_info.account,
					password: this.log_info.password,
				}
			})
			if (res.data.code == 200) {
				//登录成功后，将用户信息计入本地缓存
				let userInfo={
					avatar:res.data.data.avatar,
					id:res.data.data.id,
					username:res.data.data.username
				}
				// console.log('userinfo:',userInfo)
				uni.setStorageSync('userInfo',userInfo)
				uni.showToast({
					title: '登录成功了',
					duration: 1500,
					//跳转到tabbar页面只能用switchtab
					success() {
						//uni.showToast的success回调会在toast开始显示时立即触发，而不是等待duration结束后触发
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/cart/cart',
							})
						}, 1500);
					}
				});
			} else {
				uni.showToast({
					title: '用户名或密码错误',
					duration: 2000
				})
			}
		},
	}
};
</script>

<style>
uni-input {
	margin-left: 0 !important;
}
</style>
<style lang="scss" scoped>
.login {
	.logo-box {
		display: flex;
		align-items: center;
		flex-direction: column;
		padding: 50rpx 0;

		.logo {
			width: 300rpx;
		}

		view {
			font-size: 40rpx;
			font-weight: 600;
		}
	}

	.form {
		padding: 0 80rpx;

		.input {
			display: flex;
			align-items: center;
			border-bottom: 1px solid rgba(221, 221, 221, 1);
			padding-bottom: 20rpx;
			margin-bottom: 35rpx;
			font-size: 32rpx;

			image {
				width: 35rpx;
			}

			input {
				flex: 1;
				margin-left: 20rpx;
			}
		}

		.psd {
			justify-content: space-between;
			margin-bottom: 20rpx;
		}

		.reg-for {
			font-size: 28rpx;
			display: flex;
			justify-content: space-between;
			margin-bottom: 50rpx;
			.reg{
				color: #1890FF;
			}
		}

		.btn {
			color: RGBA(255, 255, 255, 1);
			background-color: #31cc4b;
			text-align: center;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 40rpx;
			font-size: 36rpx;
			
		}
	}

	.footer {
		position: absolute;
		bottom: 0;
		width: 100%;
	}
}
</style>
